<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog :title="!form.id ? '新增' : '修改'"   v-model="visible">
    <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="form.type" size="small">
              <el-radio-button label="0" value="0">菜单</el-radio-button>
              <el-radio-button label="1" value="1">按钮&接口</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上级菜单" prop="type">
          <avue-input-tree
                           checkStrictly
                           v-model="form.parentId" placeholder="选择上级菜单"
                           :dic="menuOptions"></avue-input-tree>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="form.type !== '1'">
        <el-col :span="12">
          <el-form-item label="图标" prop="icon" ><avue-input-icon v-model="form.icon" :icon-list="iconList"></avue-input-icon></el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="导航" prop="nav" >
            <el-radio-group v-model="form.nav">
              <el-radio-button label="0">管理端</el-radio-button>
              <el-radio-button label="1">用户PC端</el-radio-button>
              <el-radio-button label="2">用户移动端</el-radio-button>
              <el-radio-button label="4">用户2端</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.type !== '1'">
        <el-col :span="12">
           <el-form-item label="名称" prop="name"><el-input v-model="form.name" placeholder="请输入菜单名称" /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路由类型" prop="nav" >
            <el-radio-group v-model="form.link">
              <el-radio-button label="0">组件</el-radio-button>
              <el-radio-button label="1">外部网页</el-radio-button>
              <el-radio-button label="2">内部网页</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="路由" prop="path" v-if="form.type != '1'"><el-input v-model="form.path" placeholder="请输入路由地址" /></el-form-item>
      <el-form-item label="组件" prop="component" v-if="form.type != '1'"><el-input v-model="form.component" placeholder="请输入组件地址" /></el-form-item>

      <el-form-item label="权限标识" prop="authority" v-if="form.type == '1'"><el-input v-model="form.authority" placeholder="请权限标识" maxlength="50" /></el-form-item>


      <el-row>
        <el-col :span="12">
          <el-form-item label="是否隐藏" prop="login" >
            <el-radio-group v-model="form.hide">
              <el-radio-button label="0">否</el-radio-button>
              <el-radio-button label="1">是</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否登录" prop="login" >
            <el-radio-group v-model="form.login">
              <el-radio-button label="0">否</el-radio-button>
              <el-radio-button label="1">是</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="form.type !== '1'">


        <el-col :span="12">

          <el-form-item label="样式" prop="style">
            <el-radio-group v-model="form.style">
              <el-radio-button label="0">默认</el-radio-button>
              <el-radio-button label="1">page</el-radio-button>
            </el-radio-group>
          </el-form-item>

        </el-col>

        <el-col :span="12">
          <el-form-item label="公共" prop="pub" >
            <el-radio-group v-model="form.pub">
              <el-radio-button label="0">否</el-radio-button>
              <el-radio-button label="1">是</el-radio-button>
            </el-radio-group>
          </el-form-item>

        </el-col>

      </el-row>


      <el-row>


        <el-col :span="12">
          <el-form-item label="排序" prop="sort"><el-input-number v-model="form.sort" controls-position="right" :min="0" /></el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="路由缓冲" prop="keepAlive" >
            <el-radio-group v-model="form.keepAlive">
              <el-radio-button label="0">否</el-radio-button>
              <el-radio-button label="1">是</el-radio-button>
            </el-radio-group>
          </el-form-item>

        </el-col>
      </el-row>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {pageCore, listCore, getCore, saveCore,delCore,importCore,exportCore} from "@/framework-core/api/core/api";
import {fetchMenuTreeByMng} from "@/framework-admin/api/admin/menu";
import iconList from "@/framework-core/config/iconList";

import { convertDic} from '@/framework-core/utils/util'
export default {
  name: "Menu",
  // components: {Treeselect},
  data() {
    return {
      pageConfig:{"url":"sys/menu"},
      // 遮罩层
      loading: true,
      // 菜单树选项
      menuOptions: [],
      // 是否显示弹出层
      visible: false,
      // 图标
      iconList: iconList,
      form: {
        id: 0,
        name: undefined,
        path: undefined,
        icon: undefined,
        authority: undefined,
        component: undefined,
        type: "0",
        hide:0,
        login:1,
        style:0,
        keepAlive: "0",
        link:"0",
        sort: 1
      },
      // 表单校验
      rules: {
        name: [{required: true, message: "菜单名称不能为空", trigger: "blur"}],
        sort: [{required: true, message: "菜单顺序不能为空", trigger: "blur"}],
       // path: [{required: true, message: "路由地址不能为空", trigger: "blur"}],
        //keepAlive: [{required: true, message: "路由缓冲不能为空", trigger: "blur"}],
        authority: [{required: true, message: "权限标识不能为空", trigger: "blur"}]
      }
    };
  },
  setup () {
    onMounted(() => {
      console.log('mounted in the composition api!')
    })
  },
  methods: {
    init(isEdit, row) {
      // if (id != null) {
      //   this.form.parentId = id;
      // }

      this.visible = true;
      // this.initTree(  1)
      // this.$nextTick(() => {
      //   this.$refs["dataForm"].resetFields();
      //   if (isEdit) {
      //     var $that = this;
      //     getCore(this.pageConfig.url,id).then(response => {
      //       $that.form = response.data.data.data;
      //
      //     });
      //   } else {
      //     this.form.id = undefined;
      //   }
      // });
      this.initTree(row.parentId);
      this.$nextTick(() => {
        var $that = this;
        this.$refs["dataForm"].resetFields();
        debugger
        if (isEdit) {
          this.form = row
          if(row.meta){
            let meta = JSON.parse(row.meta);
            if(meta && meta.link){
              this.form.link = meta.link
            }else{
              this.form.link = "0";
            }
          }
        }else{
          this.form.id = undefined;
        }

      });
    },
    initTree(parentId){
      this.form.parentId = parentId;
      this.getTreeselect();
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.form.parentId === undefined) {
            this.form.parentId = 0;
          }
          if(!this.form.meta){
            this.form.meta ={}
          }else {
            if (typeof this.form.meta === 'string') {
              this.form.meta = JSON.parse( this.form.meta)
            }
          }
          this.form.meta.link = this.form.link;
          this.form.meta = JSON.stringify(this.form.meta);
          saveCore(this.pageConfig.url,this.form).then(data => {
            this.$message.success("保存成功");
            this.visible = false;
            this.$emit("refreshDataList");
          });

        }
      });
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      fetchMenuTreeByMng(this.queryParams).then(response => {
        this.menuOptions = [];

        const menu = {value: 0, label: "根菜单", children: []};
        convertDic(response.data.data.data,menu.children);
        //const menu = {id: -1, name: "根菜单", children: []};
       // menu.children = response.data.data.data;
        this.menuOptions.push(menu);
        this.loading = false;
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    }
  }
};
</script>
